<template>
	<view class="home-container">
		<!-- 顶部欢迎区域 -->
		<view class="swiper">
			<uv-swiper :list="listBanner" :height="300" :radius="0"></uv-swiper>
			<view class="menus">
				<view v-for="(item,index) in menus" :key="index" class="item" @click="navigateTo(item.url)">
					<image :src="item.icon" mode="aspectFill" class="menu-icon"></image>
					<text class="menu-label">{{item.label}}</text>
				</view>
			</view>
		</view>

    <card title="快捷功能" class="card">
      <view class="card-option">
        <view class="item" @click="addDomain">
          <image src="/static/tabbar/index.png" mode="aspectFill" class="option-icon"></image>
          <text class="menu-label">添加域名</text>
        </view>
        <view class="item" @click="navigateTo('/pages/home/index')">
          <image src="/static/tabbar/tools.png" mode="aspectFill" class="option-icon"></image>
          <text class="menu-label">域名列表</text>
        </view>
      </view>
    </card>

    <card title="访问记录" class="card">
      <template #option>
        <uv-text @click="_getLog" style="margin-left: 20px" text="刷新"></uv-text>
      </template>
      <view>
        <view class="card-item" v-for="(item,index) in tableList" :key="index">
          <view class="log">{{item.context}}</view>
          <view class="log">记录序号:{{item.id}}</view>
          <view class="log">访问平台:{{item.platform}}</view>
          <view class="log">访问地址:{{item.ip}}</view>
          <view class="log">来源城市:{{item.region}}</view>
          <view class="log">请求路径:{{item.url}}</view>
          <view class="log">{{item.time}}</view>
          <view class="time">{{item.userAgent}}</view>
        </view>
      </view>
    </card>
    <uv-toast ref="toast"></uv-toast>
		<tabber></tabber>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
  import {jumpPage} from '@/utils/uniUtil.js'
	import banner1 from '@/assets/banner1.png'
	import banner2 from '@/assets/banner2.png'
	import menu from '@/assets/menu.png'
	import tabber from '@/components/tabber/tabber.vue'
  import card from '@/components/card-all/index.vue'

  import {getLog} from '@/api/app.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

  const tableList = ref([])
  const toast = ref(null)
	onShow(() => {
		uni.hideTabBar()
	})

  onLoad(()=>{
    _getLog()
  })

  const _getLog = () =>{
    getLog().then(res=>{
      console.log(res)
      tableList.value = res.data
      toast.value.show({
        type: 'success',
        message: "成功"
      })
    })
  }

	const listBanner = ref([
		banner1,banner2
	])

  const addDomain = () =>{
    jumpPage('/pages/home/form/domain',{type:'add',id:""})
  }

	const cards = [{
			title: '域名总数',
			description: '探索最优路线',
			icon: 'icon-map',
			path: '/pages/map/index'
		},
		{
			title: 'IP绑定',
			description: '管理您的账户',
			icon: 'icon-user',
			path: '/pages/personal/index'
		},
		{
			title: '工具箱',
			description: '便捷实用工具',
			icon: 'icon-tool',
			path: '/pages/tools/index'
		},
		{
			title: '在线设备',
			description: '资源下载',
			icon: 'icon-download',
			path: '/pages/down/index'
		}
	]
	
	const menus = ref([
		{
			icon:menu,
			label:"扫一扫"
		},
		{
			icon:menu,
			label:"域名"
		},
		{
			icon:menu,
			label:"状态"
		},
		{
			icon:'/static/tabbar/me.png',
			label:"我的",
      url: '/pages/me/index'
		}
	])

	const navigateTo = (path) => {
		uni.navigateTo({
			url: path
		})
	}
</script>

<style lang="scss" scoped>
	.home-container {
    min-height: 100vh;
		background-color: #f5f5f3;
	}

	.swiper {
		height: 360px;
		position: relative;
    overflow: visible;
		.menus{
			padding: 20rpx;
			display: flex;
      background-color: #fff;
			justify-content: space-between;
      background-image: linear-gradient(168deg, #fff, rgba(255, 165, 0, 0.18));
			border-radius: 10rpx;
			position: absolute;
      bottom: 20px;
			left: 16px;
      right: 16px;
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.menu-icon{
					width: 50rpx;
					height: 50rpx;
				}
        .menu-label{
          color: var(--bg);
        }
			}
		}
	}
  .card{
    margin: 15px 16px;
    background-image: linear-gradient(168deg, #fff, rgba(255, 165, 0, 0.18));
    .card-content{
      .card-item{
        padding: 25rpx 0;
        border-bottom: 0.42rpx solid #ddd;
        // 选择最后一个 card-item
        &:last-child {
          border-bottom: none;
        }
        .log{
          font-size: 16px;
          color: #444;
          margin-bottom: 5px;
        }
        .time{
          font-size: 12px;
          color: #999;
        }
      }
    }
    .card-option{
      display: flex;
      .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
        .option-icon{
          width: 40px;
          height: 40px;
        }
        .menu-label{
          font-size: 16px;
          color: var(--bg);
        }
      }
    }
  }

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>